import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
import $ from 'jquery';

const myStyles = {
    noTextDecor: {
        textDecoration: 'none'
    }
}

export default class UserMenu extends React.Component {
    constructor(props) {
        super(props)
        this.logout = this.logout.bind(this)
    }

    handleCreateSurvey() {
        console.log('Create survey')
    }

    handleManageSurvey() {
        console.log('Manage survey')
    }

    logout() {
        console.log('Logout')
        const me = this

        $.ajax({
            url: '/api/LoginOutUser',
        }).then(res => {
            if(!res.IsOk){
                alert('注销失败')
                return
            }
            alert('注销成功')
            me.props.logout()
        },err => {
            alert('服务器响应错误')
        })
    }

    render() {
        return (
            <div style={{color: 'white', display: 'flex',alignItems: 'center'}}>
                <div>欢迎,{this.props.name}</div>
                <IconMenu
                    iconButtonElement={<IconButton  ><MoreVertIcon color='white' /></IconButton>}
                    anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                    targetOrigin={{horizontal: 'right', vertical: 'top'}}

                >
                    <Link to="/create-survey" style={myStyles.noTextDecor}><MenuItem primaryText="创建问卷"/></Link>

                    <MenuItem primaryText="退出登录" onClick={this.logout}/>
                </IconMenu>
            </div>
        )
    }
}